<html>
<head>
<title>RChart, User Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="35">
<h3>RCHART, User Guide</h3>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><i>Copyright 2005, J4L 
  Components (http://www.java4less.com)<br>
  </i></font><a href="tutorialcontents.html">Go bak to contents</a></p>
<hr>
<h3><font face="Arial, Helvetica, sans-serif">RChart , The layout</font></h3>
<ul>
  <li><a href="#2"><font face="Arial, Helvetica, sans-serif" size="-1">Chart's 
    Layout</font></a></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#3"> The title</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#4"> The legend</a><br>
    </font></li>
</ul>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="2"></a>Chart's 
  layout</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Charts are made of the 
  following 6 areas (See example):</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Chart area: this is 
    the area reserved for the plotter (orange area).</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Left margin: this is 
    the area reserved for the Y Axis label and ticks.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Right margin: this is 
    the area reserved for the Y2 Axis label and ticks.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Top margin: this is 
    the area reserved for the title.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Bottom margin: this 
    is the area reserved for the Y Axis label and ticks.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Legend margin: this 
    is the area reserved for the legend. The legend can be located at the TOP, 
    at the BOTTOM or to the RIGHT.</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/chartLayout.png" width="430" height="393"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The previous example was 
  created with the following parameters:</font></p>
<table width="100%" border="0">
  <tr> 
    <td width="2%">&nbsp;</td>
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="2%">&nbsp;</td>
    <td width="29%" valign="top">LEFT_MARGIN=0.18 <br>
      RIGHT_MARGIN=0.1<br>
      TOP_MARGIN=0.1<br>
      BOTTOM_MARGIN=0.1<br>
      LEGEND_MARGIN=0.2<br>
      LEGEND_POSITION=BOTTOM<br>
      LEGEND=FALSE </td>
    <td width="69%" valign="top"><i><font color="#3333FF">18 % of the width (default 
      is 12.5%)<br>
      10 % of the width (default is 12.5%)<br>
      10 % of the height (default is 12.5%)<br>
      10 % of the height (default is 12.5%)</font></i><br>
      <i><font color="#3333FF">20 % of the height</font></i> <i><font color="#3333FF">(default)</font></i><br>
      <i><font color="#3333FF">Legend is at the bottom</font></i> <i><font color="#3333FF">(default 
      is RIGHT)</font></i><br>
      <i><font color="#3333FF">Do not display legend, leave space empty (default 
      is TRUE)</font></i></td>
    <td width="69%" valign="top"> 
      <div align="left"> 
        <p><font color="#000000">Chart.leftMargin=0.18;<br>
          Chart.rightMargin=0.1;<br>
          Chart.topMargin=0.1;<br>
          Chart.bottomMargin=0.1; <br>
          Chart.legendMargin=0.2; <br>
          Chart.layout =LAYOUT_LEGEND_BOTTOM;<br>
          Chart.legend=null; </font></p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">A margin of 0.18 means 
  18% of the width (or height) of the chart.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The space reserved for 
  the axis is divided in 2 areas of equal size:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Label area (see blue 
    rectangle in screenshot).</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Scale (ticks) area (see 
    green rectangle in screenshot).</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/chartLayout1.png" width="169" height="372"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">if you are using a second 
  Y2 axis, there is an additional parameter:</font></p>
<table width="100%" border="0" bordercolor="#000000">
  <tr> 
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="29%" valign="top" height="26">CHART_SECOND_AXIS_MARGIN=0.05</td>
    <td width="69%" valign="top" height="26"><i><font color="#3333FF">5 % of the 
      width</font></i></td>
    <td width="69%" valign="top" height="26"> 
      <div align="left"> 
        <p>Chart.secondYAxisMargin=0.05;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">That is the blue rectangle 
  in the screenshot. This parameter is normally set to 0 (default).</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/chartLayout2.png" width="430" height="301"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="3"></a>The title</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">As already stated, the 
  title is painted in the area reserved by the top margin parameters. The following 
  parameters control the title:</font></p>
<table width="100%" border="0">
  <tr> 
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="69%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="29%" valign="top" height="26">TITLECHART=Sales 1999 \n An overview<br>
      TITLE_FONT=Dialog|BOLD|12 TITLE_COLOR=0x404040 </td>
    <td width="69%" valign="top" height="26"><i><font color="#3333FF">Text of 
      the title, you can use &quot;\n&quot; to create a new line.<br>
      Font of the title.<br>
      Color of the text.</font></i></td>
    <td width="69%" valign="top" height="26"> 
      <div align="left"> 
        <p>Chart.title= new Title(&quot;Sales 1999 \\n An overview&quot;);</p>
        <p>Chart.title.font=Graphicsprovider.getFont( &quot;Dialog", ChartFont.BOLD,12);<br>
          Chart.title.color= GraphicsProvider.getColor(0x40, 0x40, 0x40);</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The result of the above 
  parameters is:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/title.png" width="343" height="59"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="4"></a>The Legend</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The legend is the small 
  box next to the chart that describes the content of the chart. The legend is 
  placed in the space reserved by LEGEND_MARGIN and at the position specified 
  by LEGEND_POSITION which can be TOP, BOTTOM or RIGHT.</font></p>
<table width="100%" border="0">
  <tr> 
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="40%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="29%" valign="top" height="26">LEGEND_FILL=WHITE<br>
      LEGEND_COLOR=0xff LEGEND_FONT=Dialog|ITALIC|10 LEGEND_VERTICAL=FALSE LEGEND_BORDER=0.2|0xff|NORMAL 
      LEGEND_POSITION=TOP LEGEND_MARGIN=0.12 </td>
    <td width="31%" valign="top" height="26"><i><font color="#3333FF">Background 
      color of the legend<br>
      Color of the font<br>
      Font<br>
      Layout of the legend (vertical or horizontal)<br>
      Style of the line of the border<br>
      Position<br>
      Reserved area</font></i></td>
    <td width="40%" valign="top" height="26"> 
      <div align="left"> 
        <p>Chart.legend.background=new FillStyle(Color.white);<br>
          Chart.legend.color= GraphicsProvider.getColor( ChartColor.BLUE);<br>
          Chart.legend.color= Graphicsprovider.getFont(Dialog", ChartFont.ITALIC,10);<br>
          Chart.legend.verticalLayout=false;<br>
          <font color="#000000">Chart.legend.border=new LineStyle(0.2, GraphicsProvider.getColor( 
          ChartColor.BLUE) ,LineStyle.NORMAL);</font><br>
          <font color="#000000">Chart.layout =LAYOUT_LEGEND_TOP;</font> <br>
          <font color="#000000">Chart.legendMargin=0.12;</font> </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The result of the above 
  parameters is:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/legend.png" width="347" height="112"></font></p>
<p>&nbsp;</p>
<hr>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
